<template>
  <div class="ques-view-box">
    <div class="view-lis-box">
      <div class="view-lis-label">题干：</div>
      <div class="view-lis-text" v-html="questionData.allTitle"></div>
    </div>
    <div class="view-lis-label" v-if='questionData.fileList.length>0'>附件：</div>
    <div class="add-up-box view-lis-text" style="padding-top: 0px;">
      <div class="add-up-list"  style="margin-top:0px;">
        <div v-for="(item,index) in questionData.fileList" :key="index" class="add-up-lis" style="padding: 0px;display:block">
          {{item.DocTitle}}
          <span @click="getShow(item,1)" style="margin-right: 10px;">下载</span>
          <span
            @click="getShow(item,2)"
            style="margin-right: 10px;"
            v-if="item.DocType.toLowerCase() != 'rar' && item.DocType.toLowerCase() != 'zip' &&  item.DocType.toLowerCase() != 'mov'"
          >查看</span>
        </div>
      </div>
    </div>
    <div
      class="view-lis-box"
      v-if="questionData.questionType == 1 || questionData.questionType == 2 || questionData.questionType == 3 || questionData.questionType == 7"
    >
      <div class="view-lis-label">选项：</div>
      <div
        class="view-lis-text"
        v-if="questionData.questionType == 1 || questionData.questionType == 2"
      >
        <div class="ques-lis" v-for="(item,index) in questionData.optionList" :key="index">
          {{Alphabet[index]}}、
          <span class="option-text" v-html="item.Content"></span>
        </div>
      </div>
      <div class="view-lis-text" v-if="questionData.questionType == 3">
        <div class="ques-lis">A、正确</div>
        <div class="ques-lis">B、错误</div>
      </div>
      <div class="view-lis-text" v-if="questionData.questionType == 7">
        <div v-for="(item,index) in questionData.optionList" :key="index">
          {{index+1}}、
          <span class="option-text" v-html="item.OptionContent"></span>
        </div>
        <div v-for="(item,index) in questionData.questionAnswer" :key="index">
          {{Alphabet[index]}}、
          <span class="option-text" v-html="item.OptionAnswerContent"></span>
        </div>
      </div>
    </div>
    <div
      class="view-lis-box"
      v-if="questionData.questionType != 8 && questionData.questionType != 9 && questionData.questionType != 11 && questionData.questionType != 12 && questionData.questionType != 13"
    >
      <div class="view-lis-label">参考答案：</div>
      <div
        class="view-lis-text"
        v-if="questionData.questionType == 1"
        v-html="Alphabet[Number(questionData.answer)]"
      ></div>
      <div class="view-lis-text" v-if="questionData.questionType == 2">
        <span v-for="(item,index) in answerList" :key="index">
          {{Alphabet[Number(item)]}}
          <label v-if="index+1 < answerList.length">,</label>
        </span>
      </div>
      <div class="view-lis-text" v-if="questionData.questionType == 3">
        <span v-if="Number(questionData.answer) == 1">正确</span>
        <span v-if="Number(questionData.answer) == 0">错误</span>
      </div>
      <div class="view-lis-text" v-if="questionData.questionType == 4">
        <div v-for="(item,index) in quesData" :key="index">
          填空{{index+1}}：
          <div class="exercise-content-box">
            <!-- <span style="color: #0177d5;" v-if="item.Order[0].ScoreType == 0">全字匹配</span>
            <span style="color: #0177d5;" v-if="item.Order[0].ScoreType == 1">模糊匹配</span> -->
            <span style="margin-left: 10px;color: #0177d5;">
              <label v-if="!item.Order[0].CaseSensitive">不</label>严格区分大小写
            </span>
            <div v-for="(child,key) in item.Order" :key="key">
              {{key+1}}、{{child.Content}}
              <span style="margin-left: 10px;">({{child.Percent}}%)</span>
              
            </div>
          </div>
        </div>
      </div>
      <div class="view-lis-text" v-if="questionData.questionType == 5">
        <div
          v-for="(item,index) in questionData.optionList"
          :key="index"
        >填空{{index+1}}：{{item.Content}}</div>
      </div>
      <div class="view-lis-text" v-if="questionData.questionType == 6" v-html="questionData.answer"></div>
      <div class="view-lis-text" v-if="questionData.questionType == 7">
        <span v-for="(item,index) in answerList" :key="index">
          {{Alphabet[item]}}
          <label v-if="index+1 < answerList.length">、</label>
        </span>
      </div>
    </div>
    <div class="view-lis-box" v-else>
      <div style="padding: 0px 100px;" v-for="(item,index) in subQuestionList" :key="index">
        <div style="color: #0177D5;font-weight: bold;">
          {{index+1}}.
          <span v-if="item.subQuestionType == 1">单选题</span>
          <span v-if="item.subQuestionType == 2">多选题</span>
          <span v-if="item.subQuestionType == 3">判断题</span>
          <span v-if="item.subQuestionType == 6">问答题</span>
        </div>
        <div class="child-lis-label">题干：</div>
        <div class="child-lis-text" v-html="item.subQuestionTitle"></div>
        <div class="child-lis-label" v-if="item.subQuestionType != 6">选项：</div>
        <div class="child-lis-text" v-if="item.subQuestionType == 1 || item.subQuestionType == 2">
          <div v-for="(child,key) in item.subOptionList" :key="key">
            {{Alphabet[key]}}、
            <span v-html="child.Content"></span>
          </div>
        </div>
        <div class="child-lis-text" v-if="item.subQuestionType == 3">
          <div class="ques-lis">A、正确</div>
          <div class="ques-lis">B、错误</div>
        </div>
        <div class="child-lis-label">参考答案：</div>
        <div
          class="child-lis-text"
          v-if="item.subQuestionType == 1"
          v-html="Alphabet[Number(item.subAnswer)]"
        ></div>
        <div class="child-lis-text" v-if="item.subQuestionType == 2">
          <span v-for="(value,i) in item.subQuestionAnswer" :key="i">
            {{Alphabet[Number(value)]}}
            <label v-if="i+1 < item.subQuestionAnswer.length">、</label>
          </span>
        </div>
        <div class="child-lis-text" v-if="item.subQuestionType == 3">
          <span v-if="Number(item.subAnswer) == 1">正确</span>
          <span v-if="Number(item.subAnswer) == 0">错误</span>
        </div>
        <div class="child-lis-text" v-if="item.subQuestionType == 6" v-html="item.subAnswer"></div>
      </div>
    </div>
    <div class="view-lis-box" v-if="questionData.questionType == 4">
        <div class="view-lis-label">顺序匹配：</div>
        <span v-if="!questionData.IsOrderMatching">否</span>
        <span v-else>是</span>
      </div>
    <div class="view-lis-box">
      <div class="view-lis-label">答案解析：</div>
      <div class="view-lis-text" v-html="questionData.resultAnalysis"></div>
    </div>
    <div class="mc-exam" v-show="Show" @click="getPreviewShow">
      <div
        style="position: fixed;right: 50px;top: 28px;color: #fff;z-index: 1000;cursor: pointer;"
        @click.stop="getPreviewShow"
      >
        <i class="iconfont icon-remove" style="font-size: 24px;"></i>
      </div>
      <preview :data="upData" :Show="Show" ref="child" :imgDeg="imgDeg"></preview>
    </div>
  </div>
</template>

<script>
import preview from '@/components/filePreview/index.vue';
export default {
  components: {
    preview
  },
  data() {
    return {
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      answerList: [],
      quesData: [],
      upData: {},
      imgDeg: 0,
      Show: false
    };
  },
  props: {
    questionData: {
      type: Object,
      default: () => {}
    },
    subQuestionList: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    console.log('123456');
    console.log(this.questionData);
    this.answerList = [];
    if (this.questionData.questionType == 2) {
      this.answerList = this.questionData.answer.split(',').map(Number);
    } else if (this.questionData.questionType == 7) {
      this.answerList = this.questionData.answer.split(',').map(Number);
    } else if (this.questionData.questionType == 4) {
      var num = [];
      var questionAnswer = JSON.parse(this.questionData.dataJson);
      for (let i = 0; i < questionAnswer.length; i++) {
        var key = questionAnswer[i].SortOrder;
        if (num.length < key + 1) {
          let list = {
            Order: [
              {
                SortOrder: questionAnswer[i].SortOrder,
                Content: questionAnswer[i].Content,
                Percent: questionAnswer[i].Percent,
                ScoreType: questionAnswer[i].ScoreType,
                MatchingType: questionAnswer[i].MatchingType,
                CaseSensitive: questionAnswer[i].CaseSensitive
              }
            ]
          };
          num.push(list);
        } else {
          let lis = {
            SortOrder: questionAnswer[i].SortOrder,
            Content: questionAnswer[i].Content,
            Percent: questionAnswer[i].Percent,
            ScoreType: questionAnswer[i].ScoreType,
            MatchingType: questionAnswer[i].MatchingType,
            CaseSensitive: questionAnswer[i].CaseSensitive
          };
          num[key].Order.push(lis);
        }
      }
      this.quesData = num;
    }
  },
  methods: {
    getPreviewShow() {
      this.Show = false;
      this.imgDeg = 0;
      this.upData = {};
      this.$refs.child.setVideo();
    },
    getShow(item, type) {
      if (type == 1) {
        this.$http
          .post('/common/ueditor/previewUrl', {
            url: item.Url,
            title: item.DocTitle
          })
          .then((res) => {
            window.open(res.downloadUrl);
          });
      } else if (type == 2) {
        this.upData = item;
        this.Show = true;
      }
    }
  }
};
</script>

<style>
</style>